<template>
	<view>
		<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel" ></image-cropper>
	</view>
</template>

<script>
	import ImageCropper from '@/components/invinbg-image-cropper/invinbg-image-cropper.vue'
	export default {
		data() {
			return {
				tempFilePath: '', //临时路径
				cropFilePath: ''  //裁剪后的路径
			}
		},
		components: {ImageCropper},
		methods: {
			confirm(e) {
				this.tempFilePath = ''
				this.cropFilePath = e.detail.tempFilePath
				uni.showToast({title: "编辑成功", icon: "none"});	
				const pictureStatus = this.$store.state.pictureStatus
				if(pictureStatus === 'cardFront') {
					this.$store.commit('editFrontImgPath', this.cropFilePath)	
					uni.navigateBack({
						url:"/pages/idCard/idCard"
					})
					return
				}
				if(pictureStatus === 'cardBack') {
					this.$store.commit('editBackImgPath', this.cropFilePath)
					uni.navigateBack({
						url:"/pages/idCard/idCard"
					})
					return
				}
				if(pictureStatus === 'bankCard') {
					this.$store.commit('editBankImgPath', this.cropFilePath)
					uni.navigateBack({
						url:"/pages/bank/bank"
					})  
					return
				}
				
				// const blob = this.dataURItoBlob(this.cropFilePath)
				// const imgBlob = URL.createObjectURL(blob) //将blob对象加密  成 blob:http 地址
				// console.log(imgBlob)
				// this.$store.commit('editImgPath', imgBlob)
				
			},
			// 将base64格式的如片转化为blob对象
			dataURItoBlob(base64Data) {
			    var byteString;
			    if(base64Data.split(',')[0].indexOf('base64') >= 0)
			        byteString = atob(base64Data.split(',')[1]);  
			    else
			        byteString = unescape(base64Data.split(',')[1]);
			    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
			    var ia = new Uint8Array(byteString.length);
			    for(var i = 0; i < byteString.length; i++) {
			        ia[i] = byteString.charCodeAt(i);
			    }
			    return new Blob([ia], {
			        type: mimeString
			    });
			},
			
			cancel() {
				console.log('canceled')
			}
		},
		onShow() {
			// debugger
			const picStatus = this.$store.state.pictureStatus
			if(!picStatus){
				return
			}
			if(picStatus === 'cardFront'){
				this.tempFilePath = this.$store.state.picturePath
			}
			if(picStatus === 'cardBack'){
				this.tempFilePath = this.$store.state.pictureBackPath
			}
			if(picStatus === 'bankCard'){
				this.tempFilePath = this.$store.state.pictureBankPath
			}
		}
	}
</script>

<style>

</style>
